<%--
  Created by IntelliJ IDEA.
  User: 61741
  Date: 2018/2/10
  Time: 22:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<html>
<head>
    <title>城市选择</title>
    <style>
        div#areaDialog {
            /* position: fixed; */
            /* top: 15%; */
            /* left: 25%; */
            /* width: 50%; */
            /* margin-left: -25%; */
            /* background: #fff; */
            /* border: 1px solid #ddd; */
            /* height: 380px; */
            border-radius: 3px;
            /* box-shadow: 1px 1px 3px #ccc; */
            /* padding: 5px 10px; */
            /* overflow-x: hidden; */
            /* overflow-y: auto; */
        }

        div#areaDialog a{
            font-size:14px;
            line-height:25px;
            display:inline-block;
            margin:0.2rem 0.8rem;
            width:10em;
            text-decoration:none;
            background:#fff;
            vertical-align:top;
            margin: 0 0.8rem;
            text-indent: 1rem;
            /* text-align: center !important; */
            line-height:38px
        }

        .city-select {
            /* border:1px solid #ddd; */
            transition:all ease .4s;
            height:0;
            display:none;
            overflow:hidden;
            margin-top:-1px;
            margin: 0 auto !important;
            background: #ebe9e9;
            cursor: pointer;
        }
        div#areaDialog a.active:after{
            content:' ';
            display:block;
            width:5px;
            height:5px;
            background:transparent;
            border:5px solid transparent;
            border-bottom-color:#ebe9e9;
            position:absolute;
            left:30%;
            margin-left:-5px;
            bottom:0;
        }
        div#areaDialog a.active,.city-select a.active{
            color: #f34b91;
            /* border:1px solid #ddd; */
            border-bottom:none;
            z-index: 999;
            margin-top: 0 !important;
            margin-bottom: 0 !important;

            /* text-align: center; */
            position:relative;
        }

        .city-select.active {
            display: block;
            padding:0.4rem 0;
            height:auto;
            color: #f34b91;
        }
        .city-select a{
            margin:0 auto !important;
            background:transparent !important;
        }
    </style>
</head>
<body>
<div class="modal fade" id="areaSlectBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">选择城市</h4>
            </div>
            <div class="modal-body">
                <div class="areaSelect" id="areaDialog">
                    <c:forEach items="${provinces}" var="province" varStatus="status">
                        <a href="javascript:getCity(${province.addressId})" code="${province.addressId}">
                                ${province.name}
                        </a>
                        <c:if test="${status.index != 0}">
                            <c:if test="${(status.index+1) % 3 == 0}">
                                <div class="city-select"></div>
                            </c:if>
                            <c:if test="${status.index ==provinces.size()-1}">
                                <div class="city-select"></div>
                            </c:if>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    function getCity(provinceId) {
        $(".areaSelect a.active,.areaSelect .city-select.active").removeClass("active");
        $(".areaSelect a[code=\"" + provinceId + "\"]").addClass("active");
        var targetDiv = $(".areaSelect a[code=\"" + provinceId + "\"]").nextAll(".city-select")[0];
        $(targetDiv).addClass("active");

        var data = {provinceId: provinceId}
        asyncAjax({
            url: ctx + "/area/getAllcity?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function () {
                $(targetDiv).html("");
            },
            success: function (res) {
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        var html = "";
                        $.each(res["data"], function (idx, item) {
                            html += "<a href='javascript:setCity("+item["addressId"]+","+"\""+ item["shortName"]+"\")' value=\"" + item["addressId"] + "\">" + item["shortName"] + "</a>";
                        })
                        $(targetDiv).html(html);
                    } else {
                    }
                } else {
                    bootbox.alert(res["msg"]);
                }
            }
        })
    }
    function setCity(cityId,shortName) {
        $(".city-select a[value=\"" + cityId + "\"]").removeClass("active");
        $(".city-select a[value=\"" + cityId + "\"]").addClass("active");
        if(serachClik){
            $('#fliiterCity').attr('value',cityId);
            $('#fliiterCity').html(shortName);
            searchSub('cityId','city-lable',1);
        }
        else {
            $('#changeCity').attr('value',cityId);
            $('#changeCity').html(shortName);
            city=cityId;
            serachClik=true;
        }

        $("#areaSlectBox").modal("hide");
    }
    function showAreaDialog(el) {
        id =$(el).attr('id');
        if(id!="fliiterCity"){
            serachClik=false;
        }
        $("#areaSlectBox").modal("show");
    }
</script>
</body>
</html>
